<template>
  <div class="proSelect">
    <el-select v-model="provGet" placeholder="请选择省" @change="handleChange" clearable>
      <el-option
        v-for="item in options"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
    <el-select v-model="cityGet" placeholder="请选择市" @change="handleChange2" clearable>
      <el-option
        v-for="item in cityArr"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "SelectCity",
  props: {
    Province: String,
    cityCode: String
  },
  data() {
    return {
      options: [], //省
      cityArr: [], //市
      optionProps: {
        value: "code",
        label: "name"
      },
      provGet: this.Province, //绑定省
      cityGet: this.cityCode //绑定市
    };
  },
  mounted() {
    this.getProvince();
  },
  watch: {
    Province: function(val) {
      this.provGet = val;
      //载入匹配市
      if (val) {
        this.cityArr = this.options.filter(
          item => item.code == val
        )[0].children;
      }
    },
    cityCode: function(val) {
      this.cityGet = val;
    }
  },
  methods: {
    getProvince() {
      // 获取省市
      this.axios.get("/base/getProvinceCity").then(res => {
        this.options = res;
        if (this.Province) {
          this.cityArr = this.options.filter(
            item => item.code == this.Province
          )[0].children;
        }
      });
    },
    handleChange(e) {
      console.log(e)
      if(e){
        this.cityArr = this.options.filter(item => item.code == e)[0].children;
        this.cityGet = ''
      } else {
      this.cityGet = "";
      this.cityArr = ''
      }
      // 省改变市自动清空
      this.$emit("proClick", e);
      this.$emit("cityClick", this.cityGet);
    },
    handleChange2(e) {
      this.$emit("cityClick", e);
    }
  }
};
</script>

<style>
/* .el-cascader{width: 100%;} */
.proSelect {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.proSelect .el-select {
  width: 48%;
}
</style>
